<template>
	<view class="fun-flex-col page">
		<view class="fun-mt-30 fun-flex-col group">
			<text class="fun-self-start font_2 list-title">General</text>
			
			<!-- <view class="fun-flex-row fun-justify-between fun-items-center list">
				<text class="font">Language</text>
				<view class="fun-flex-row fun-items-center">
					<text class="font_3 text_4">English</text>
					<image class="fun-ml-6 image_4" src="@/static/common/arrow_right_black.png" />
				</view>
			</view> -->
			
			<view class="fun-flex-row fun-justify-between fun-items-center list" @click="setDate">
				<text class="font">Date Format</text>
				<view class="fun-flex-row fun-items-center">
					<text class="font_3 text_4">{{dateFormat}}</text>
					<image class="fun-ml-6 image_4" src="@/static/common/arrow_right_black.png" />
				</view>
			</view>
		</view>

		<view class="fun-mt-30 fun-flex-col">
			<view class="fun-flex-col">
				<text class="fun-self-start font_2 text_5">Security</text>
				<view class="fun-mt-18 fun-flex-row fun-justify-between fun-items-center fun-self-stretch section_3" @click="toEmail">
					<text class="font text_6">Email</text>
					<view class="fun-flex-row fun-items-center">
						<text class="font_3 text_7">{{email}}</text>
						<image class="fun-ml-4 image_4" src="@/static/common/arrow_right_black.png"/>
					</view>
				</view>
			</view>
			<view class="fun-flex-col">
				<view class="fun-flex-row fun-justify-between fun-items-center section_3" @click="toDetail">
					<text class="font text_8">Change Login Password</text>
					<image class="image_4" src="@/static/common/arrow_right_black.png" />
				</view>
				
				<view class="fun-flex-row fun-justify-between fun-items-center section_3" @click="toPolicy">
					<text class="font text_8">Privacy Policy</text>
					<image class="image_4" src="@/static/common/arrow_right_black.png" />
				</view>
			</view>
		</view>
		<email-modal v-if='isShowEmail' :dataVal="email" @done='done' @close='isShowEmail = false'></email-modal>
		<date-modal v-if='isShowDate' @done='handleDate' @close='isShowDate = false'></date-modal>
	</view>
</template>
<script>
	import emailModal from '@/components/emailModal.vue';
	import dateModal from '@/components/dateModal.vue';
	export default {
		data() {
			return {
				dateFormat:uni.getStorageSync('dateVal') || "DD/MM/YYYY",
				isShowEmail:false,
				isShowDate:false,
				userInfo:{},
				email:'Not bound yet'
			};
		},
		onLoad() {
			const userInfo = uni.getStorageSync("userInfo") || {};
			this.email = userInfo?.email;
		},
		methods: {
			setDate(){
				this.isShowDate = true;
			},
			
			toDetail(){
				uni.navigateTo({url:`/pages/more/changePassword`})
			},
			
			toPolicy(){
				this.UTILS.logStr("敬请期待");
				return
			},
			
			toEmail(){
				if(this.email){
					this.isShowEmail = true
				}
				else{
					uni.navigateTo({url:`/pages/more/bindEmail`})
				}
			},
			
			done(){
				uni.navigateTo({url:`/pages/more/changeEmail?email=`+encodeURIComponent(this.email)})
			},
			
			handleDate(item){
				this.dateFormat = item.name
			}
		},
		components:{
			emailModal,
			dateModal
		}
	};
</script>

<style scoped lang="scss">
	.ml-5 {
		margin-left: 10rpx;
	}

	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		.group {
			padding: 0 48rpx 30rpx;
			border-bottom: solid 2rpx #f4f4f6;
			.list-title{
				margin-bottom: 28rpx;
			}
			.list{
				padding: 32rpx 0;
			}
		}

		.font {
			font-size: 32rpx;
			font-family: SF Pro Display;
			color: #1d1d25;
		}

		.image_4 {
			width: 48rpx;
			height: 48rpx;
		}

		.font_2 {
			font-size: 28rpx;
			font-family: SF Pro Display;
			color: #808d9e;
		}

		.text_5 {
			margin-left: 48rpx;
		}

		.section_3 {
			padding: 32rpx 48rpx;
			background-color: #ffffff;
		}

		.font_3 {
			font-size: 32rpx;
			font-family: SF Pro Display;
			color: #808d9e;
		}
	}
</style>